<template>
    <div class="login-container">
        <div class="login-box">

            <!-- 头像区域 -->
            <div class="text-center avatar-box">
                <img src="../assets/logo.png" class="img-thumbnail avatar" alt="">
            </div>

            <!-- 表单区域 -->
            <div class="form-login p-4">
                <!-- 登录名称 -->
                <!--.trim用于去除首位空格  -->
                <div class="form-group form-inline">
                    <label for="username">账户:</label>
                    <input type="text" class="form-control ml-2" id="username" placeholder="请输入账号 推荐使用手机号"
                        autocomplete="off" v-model.trim="ruleForm.loginName" />
                </div>

                <!-- 登录昵称 -->
                <div class="form-group form-inline">
                    <label for="name">昵称:</label>
                    <input type="name" class="form-control ml-2" id="name" placeholder="请输入昵称"
                        v-model.trim="ruleForm.name" />
                </div>
                <!-- 登录密码 -->
                <div class="form-group form-inline">
                    <label for="password">密码:</label>
                    <input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码"
                        v-model.trim="ruleForm.password" />
                </div>
                <!-- 确认密码 -->
                <div class="form-group form-inline">
                    <label for="checkpassword">确认密码:</label>
                    <input type="password" class="form-control ml-2" id="password" placeholder="请再次输入登录密码"
                        v-model.trim="ruleForm.checkPass" />
                </div>
                <!-- 登录和重置按钮 -->
                <div class="form-group form-inline d-flex justify-content-end">
                    <button type="button" class="btn btn-secondary mr-2" @click="backlogin">返回登陆界面</button>
                    <button type="button" class="btn btn-primary" @click="submitForm(ruleForm)">注册</button>
                </div>
            </div>

        </div>
    </div>
</template>
  
<script>
export default {

    name: 'MyRegister',
    data() {
        return {
            ruleForm: {
                loginName: '',
                password: '',
                name: '',
                checkPass: ""
            },
        }
    },
    methods: {
        backlogin() {
            this.$router.push('/login')
        },
        submitForm(ruleForm) {
            //校验部分
            if (this.ruleForm.password != this.ruleForm.checkPass) {
                this.$message({
                    message: '两次输入密码不一致!!!',
                    type: 'error'
                });
            }
            else if (this.ruleForm.loginName == "") {
                this.$message({
                    message: '请输入账户!!!',
                    type: 'error'
                });
            }
            else if (this.ruleForm.name == "") {
                this.$message({
                    message: '请输入昵称!!!',
                    type: 'error'
                });
            }
            else if (this.ruleForm.password == "") {
                this.$message({
                    message: '请输入密码!!!',
                    type: 'error'
                });
            }
            else {
                //发起网络请求,
                this.axios.post('http://localhost:3312/sys-user/register', this.ruleForm).then((resp) => {
                    console.log("this is register");
                    console.log(resp);
                    let data = resp.data;
                    console.log(data);
                    //检验注册是否成功
                    if (data.success) {
                        //清空表单数据
                        this.ruleForm = {};
                        //发送成功通知
                        this.$message({
                            message: '恭喜你,注册成功,点击去登陆按钮进行登陆吧!!!',
                            type: 'success'
                        });
                        this.$router.push({ path: '/login' })
                    }
                    //注册失败
                    if (!data.success) {
                        this.$message({
                            message: '注册失败,该用户名已被注册',
                            type: 'error'
                        });
                    }
                })

            }

        },
    }
}
</script>
  
<style lang="less" scoped>
.login-container {
    background-color: #35495e;
    height: 100%;

    .login-box {
        width: 400px;
        height: 320px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);

        .form-login {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
        }
    }
}

.form-control {
    flex: 1;
}

.avatar-box {
    position: absolute;
    width: 100%;
    top: -65px;
    left: 0;

    .avatar {
        width: 120px;
        height: 120px;
        border-radius: 50% !important;
        box-shadow: 0 0 6px #efefef;
    }
}
</style>